import React from "react";
import { Button, Col, Form, Input, message, Modal, Row } from "antd";
import StandardTable from "../../../components/StandardTable";
import UserAdd from "./UserAdd";
import UserEdit from "./UserEdit";
import UserDetail from "./UserDetail";
import { api } from "../../../actions/system/api";
import axios from "../../../api/index";

// 用户列表
export default class UserList extends React.Component {
	searchFormRef = React.createRef();

	// ============ 查询表单 ===============
	renderSearchForm = onSearchFormReset => {
		return (
			<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				<Col md={6} sm={24}>
					<Form.Item label="用户名称" name="userName">
						{<Input placeholder="请输入用户名称" />}
					</Form.Item>
				</Col>
				<Col md={6} sm={24}>
					<Form.Item label="手机号码" name="phoneNumber">
						{<Input placeholder="请输入手机号码" />}
					</Form.Item>
				</Col>
				<Col md={6} sm={24}>
					<Form.Item label="邮箱地址" name="email">
						{<Input placeholder="请输入邮箱地址" />}
					</Form.Item>
				</Col>
				<Col>
					<div style={{ float: "right" }}>
						<Button type="primary" htmlType="submit">
							查询
						</Button>
						<Button style={{ marginLeft: 8 }} onClick={onSearchFormReset}>
							重置
						</Button>
					</div>
				</Col>
			</Row>
		);
	};

	// ============ 弹窗 ===============
	renderModal = (
		record,
		addModalVisible,
		hideAddModal,
		onAddFinish,
		updateModalVisible,
		hideUpdateModal,
		onUpdateFinish,
		detailModalVisible,
		hideDetailModal
	) => {
		return (
			<>
				{/*新增信息弹框*/}
				<UserAdd modalVisible={addModalVisible} handleCancel={hideAddModal} handleFinish={onAddFinish} />
				{/*修改信息弹框*/}
				<UserEdit
					modalVisible={updateModalVisible}
					record={record}
					handleCancel={hideUpdateModal}
					handleFinish={onUpdateFinish}
				/>
				{/*查看详情弹框*/}
				<UserDetail modalVisible={detailModalVisible} record={record} handleCancel={hideDetailModal} />
			</>
		);
	};

	// ============ 行数据操作 ===============
	renderRecordOperate = record => {
		return (
			<>
				<span onClick={() => this.resetUserPassword(record)}>重置密码</span>
			</>
		);
	};

	resetUserPassword = record => {
		Modal.confirm({
			title: "是否确认重置密码?",
			okText: "确认",
			okType: "danger",
			cancelText: "取消",
			// 点击确认触发
			onOk() {
				axios
					.post(api.user.resetPassword, {
						id: record.id
					})
					.then(res => {
						if (res.data === true) {
							message.success("操作成功");
						}
					})
					.catch(err => {
						console.log("重置密码异常", err);
					});
			},
			// 点击取消触发
			onCancel() {}
		});
	};

	render() {
		const tableColumnAlign = "center";
		const columns = [
			{
				title: "用户名称",
				dataIndex: "userName",
				align: tableColumnAlign,
				width: 150
			},
			{
				title: "昵称",
				dataIndex: "nickName",
				align: tableColumnAlign,
				width: 150
			},
			{
				title: "手机号码",
				dataIndex: "phoneNumber",
				align: tableColumnAlign,
				width: 150
			},
			{
				title: "邮箱地址",
				dataIndex: "email",
				align: tableColumnAlign,
				width: 150
			}
		];

		return (
			<>
				<StandardTable
					code={"system.user"}
					searchFormRef={this.searchFormRef}
					columns={columns}
					renderSearchForm={this.renderSearchForm}
					renderModal={this.renderModal}
					renderRecordOperate={this.renderRecordOperate}
					recordOperateColWidth={160}
					apiAdd={api.user.add}
					apiDelete={api.user.delete}
					apiUpdate={api.user.update}
					apiUpdateState={api.user.updateState}
					apiPage={api.user.page}
					apiDetail={api.user.detail}
				></StandardTable>
			</>
		);
	}
}
